<template>
  <div class="app-container">
    <!-- 返回按钮 -->
    <div class="back-section">
      <el-button type="text" icon="el-icon-back" @click="goBack">返回上一页</el-button>
    </div>
<!-- 
    Coser信息卡片
    <el-card class="coser-detail-card" v-if="coserInfo">
      <div slot="header" class="clearfix">
        <span>Coser详情</span>
      </div>
      
      <div class="coser-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>ID：</label>
              <span>{{ coserInfo.id }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>名称：</label>
              <span>{{ coserInfo.name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>类型：</label>
              <span>{{ coserInfo.type || '未设置' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>年龄：</label>
              <span>{{ coserInfo.age || '未知' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>所在地：</label>
              <span>{{ coserInfo.location || '未设置' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>擅长领域：</label>
              <span>{{ coserInfo.expertise || '未设置' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row v-if="coserInfo.avatar" :gutter="20">
          <el-col :span="24">
            <div class="info-item">
              <label>头像：</label>
              <div class="avatar-container">
                <img :src="coserInfo.avatar" :alt="coserInfo.name" class="avatar-img">
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card> -->

    <!-- 文章管理区域 -->
    <el-card class="article-management-card">
      <div slot="header" class="clearfix">
        <span>文章管理</span>
      </div>
      
      <!-- 搜索功能区域 -->
      <div class="search-section">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-input
              v-model="searchKeyword"
              placeholder="请输入文章名称"
              clearable
              prefix-icon="el-icon-search"
              @keyup.enter="searchArticles"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" icon="el-icon-search" @click="searchArticles">搜索</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="success" icon="el-icon-plus" @click="openCreateDialog">创建文章</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 文章列表 -->
      <div class="article-list" v-if="articles.length > 0">
        <el-table :data="articles" style="width: 100%">
          <el-table-column prop="title" label="文章标题" min-width="200"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="tags" label="标签" width="200">
            <template slot-scope="scope">
              <el-tag v-for="tag in scope.row.tags" :key="tag" size="small" style="margin-right: 5px;">
                {{ tag }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="editArticle(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteArticle(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-else class="no-articles">
        <el-empty description="暂无文章，点击创建文章开始创作"></el-empty>
      </div>
    </el-card>

    <!-- 创建文章弹窗 -->
    <el-dialog
      title="创建文章"
      :visible.sync="createDialogVisible"
      width="80%"
      :close-on-click-modal="false"
    >
      <el-form :model="articleForm" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="articleForm.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        
        <el-form-item label="文章内容">
          <div class="editor-container">
            <el-input
              type="textarea"
              v-model="articleForm.content"
              placeholder="请输入文章内容"
              :rows="10"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item label="图片上传">
          <el-upload
            class="upload-demo"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleImageChange"
            :file-list="imageList"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="视频上传">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleVideoChange"
            :file-list="videoList"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="标签">
          <div class="tag-section">
            <el-tag
              v-for="tag in articleForm.tags"
              :key="tag"
              closable
              @close="removeTag(tag)"
              style="margin-right: 10px; margin-bottom: 5px;"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="tagInputVisible"
              ref="tagInput"
              v-model="tagInput"
              size="small"
              style="width: 120px;"
              @keyup.enter="addTag"
              @blur="addTag"
            ></el-input>
            <el-button v-else size="small" @click="showTagInput">+ 新标签</el-button>
          </div>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveArticle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CoserList',
  data() {
    return {
      coserInfo: {
        id: '',
        name: '',
        type: '',
        age: '',
        location: '',
        expertise: '',
        avatar: ''
      },
      searchKeyword: '',
      articles: [],
      createDialogVisible: false,
      articleForm: {
        title: '',
        content: '',
        tags: []
      },
      imageList: [],
      videoList: [],
      tagInputVisible: false,
      tagInput: ''
    }
  },
  created() {
    // 从路由参数中获取所有参数
    console.log('路由参数:', this.$route.query);
    const { id, name, type, age, location, expertise, avatar } = this.$route.query;
    
    // 修改条件判断，只要有id就显示信息
    if (id) {
      this.coserInfo = {
        id: id || '',
        name: name || '',
        type: type || '',
        age: age || '',
        location: location || '',
        expertise: expertise || '',
        avatar: avatar || ''
      };
      console.log('设置的coserInfo:', this.coserInfo);
    }
    
    // 初始化文章列表
    this.initArticles();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    
    // 初始化文章列表
    initArticles() {
      // 模拟文章数据
      this.articles = [
        {
          id: 1,
          title: 'coser摄影技巧分享',
          content: '这是一篇关于coser摄影技巧的文章...',
          createTime: '2024-01-15 10:30:00',
          tags: ['摄影', '技巧', 'coser']
        },
        {
          id: 2,
          title: '如何选择合适的coser服装',
          content: '选择合适的coser服装是每个coser的必修课...',
          createTime: '2024-01-14 15:20:00',
          tags: ['服装', '选择', 'coser']
        }
      ];
    },
    
    // 搜索文章
    searchArticles() {
      console.log('搜索关键词:', this.searchKeyword);
      // 这里实现搜索逻辑
      this.$message.success('搜索功能待实现');
    },
    
    // 打开创建文章弹窗
    openCreateDialog() {
      this.createDialogVisible = true;
      this.resetForm();
    },
    
    // 重置表单
    resetForm() {
      this.articleForm = {
        title: '',
        content: '',
        tags: []
      };
      this.imageList = [];
      this.videoList = [];
    },
    
    // 图片上传处理
    handleImageChange(file, fileList) {
      this.imageList = fileList;
      console.log('图片文件:', file);
    },
    
    // 视频上传处理
    handleVideoChange(file, fileList) {
      this.videoList = fileList;
      console.log('视频文件:', file);
    },
    
    // 显示标签输入框
    showTagInput() {
      this.tagInputVisible = true;
      this.$nextTick(() => {
        this.$refs.tagInput.$refs.input.focus();
      });
    },
    
    // 添加标签
    addTag() {
      const tag = this.tagInput.trim();
      if (tag && !this.articleForm.tags.includes(tag)) {
        this.articleForm.tags.push(tag);
      }
      this.tagInputVisible = false;
      this.tagInput = '';
    },
    
    // 删除标签
    removeTag(tag) {
      const index = this.articleForm.tags.indexOf(tag);
      if (index > -1) {
        this.articleForm.tags.splice(index, 1);
      }
    },
    
    // 保存文章
    saveArticle() {
      if (!this.articleForm.title) {
        this.$message.error('请输入文章标题');
        return;
      }
      if (!this.articleForm.content) {
        this.$message.error('请输入文章内容');
        return;
      }
      
      // 创建新文章对象
      const newArticle = {
        id: Date.now(),
        title: this.articleForm.title,
        content: this.articleForm.content,
        createTime: new Date().toLocaleString(),
        tags: this.articleForm.tags
      };
      
      // 添加到文章列表
      this.articles.unshift(newArticle);
      
      // 关闭弹窗
      this.createDialogVisible = false;
      
      this.$message.success('文章创建成功');
    },
    
    // 编辑文章
    editArticle(article) {
      this.$message.info('编辑功能待实现');
    },
    
    // 删除文章
    deleteArticle(article) {
      this.$confirm('确定要删除这篇文章吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.articles.findIndex(item => item.id === article.id);
        if (index > -1) {
          this.articles.splice(index, 1);
          this.$message.success('删除成功');
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.back-section {
  margin-bottom: 20px;
}

.coser-detail-card {
  max-width: 800px;
  margin: 0 auto 20px auto;
}

.article-management-card {
  max-width: 1200px;
  margin: 0 auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.coser-info {
  .info-item {
    margin-bottom: 15px;
    
    label {
      font-weight: bold;
      color: #606266;
      margin-right: 10px;
    }
    
    span {
      color: #303133;
    }
    
    .avatar-container {
      margin-top: 10px;
      
      .avatar-img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        object-fit: cover;
        border: 1px solid #e4e7ed;
      }
    }
  }
}

.search-section {
  margin-bottom: 20px;
}

.article-list {
  margin-top: 20px;
}

.no-articles {
  text-align: center;
  padding: 50px 0;
}

.editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.tag-section {
  min-height: 32px;
}

.dialog-footer {
  text-align: right;
}
</style>